<template>
  <div class="app-container">
    <header>
      <p class="title">POPULAR ITEMS</p>
    </header>
    <!-- 分类 -->
    <div class="classify-box">
      <p
        v-for="item in propsList"
        :key="item"
        ref="item_list"
        @click="handleChange(item)"
      >
        {{ item.name }}
      </p>
    </div>
    <!-- 道具 -->
    <main v-if="product_list.length">
      <div v-for="(item, index) in product_list" :key="index" class="game">
        <div class="image">
          <img v-lazy="item.images[0]" alt="" @click="toPropsItem(item)" />
        </div>
        <p class="name">{{ item.name }}</p>
        <p @click="toPropsItem(item)" class="text">BUY NOW</p>
      </div>
    </main>
  </div>
</template>

<script setup>
import { productList } from "@/api/product";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { nextTick, ref } from "vue";

const route = useRoute();
const router = useRouter();
const store = useStore();

// 获取道具列表
const product_list = ref([]);
const list_params = ref({
  category_id: [100300],
  page: 1,
  per_page: 15,
});
const getProductList = () => {
  productList({ ...list_params.value }).then((res) => {
    product_list.value = res.data.data;
    // console.log(product_list.value);
  });
};
getProductList();

// 跳转道具
const toPropsItem = (item) => {
  router.push({
    path: "/propsItem",
    query: { id: item.id },
  });
};

// 切换
const handleChange = (item) => {
  list_params.value.category_id = item.id;
  getProductList();
};

// 效果
const propsList = ref([
  { name: "Diablo 4", id: [100300] },
  { name: "Path Of Exile", id: [100301] },
  { name: "Elden Ring", id: [100302] },
]);
const item_list = ref(null);
nextTick(() => {
  item_list.value.forEach((item, index, arr) => {
    arr[0].classList.add("active");
    item.addEventListener("click", () => {
      item.classList.add("active");
      arr.forEach((subItem, i) => {
        if (i !== index) {
          subItem.classList.remove("active");
        }
      });
    });
  });
});
</script>

<style lang="scss" scoped>
.app-container {
  margin-top: 60px;
  header {
    margin-bottom: 40px;
    height: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(@/assets/image/index_title_02.png);
    background-size: 100%;
    .title {
      transform: translate(0, 10px);
      font-size: 60px;
      text-align: center;
      color: #bdbcbf;
    }
  }
  .classify-box {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 8px;
    padding: 17px 20px;
    background: rgba(74, 74, 76, 0.65);
    margin-bottom: 40px;
    p {
      padding: 14px 0;
      font-size: 16px;
      text-align: center;
      color: #b4b7b7;
      background: #545454;
      cursor: pointer;
      &:hover {
        color: #fff;
        background: #909894;
      }
    }
    .active {
      color: #fff;
      background: #909894;
    }
  }
  main {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    .game {
      .image {
        padding: 40px;
        width: 100%;
        height: 60%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        background: #000;
        img {
          width: 140px;
          height: 140px;
          object-fit: contain;
          transition: transform 0.6s ease;
          cursor: pointer;
          &:hover {
            transform: scale(1.5);
          }
        }
      }
      p {
        padding: 0 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        background: #151517;
        color: #8d8d8d;
      }
      .name {
        height: 20%;
      }
      .text {
        height: 20%;
        font-weight: 700;
        border-top: 1px solid #464545;
        cursor: pointer;
        &:hover {
          color: #fff;
        }
      }
      // &:nth-child(1) {
      //   grid-row: 1/3;
      //   grid-column: 1/3;
      //   .name {
      //     font-size: 20px;
      //   }
      //   .text {
      //     font-size: 20px;
      //     color: #fff;
      //     background: #1abc5f;
      //     &:hover {
      //       background: #1ed56d;
      //     }
      //   }
      // }
    }
  }
}
</style>